/**
*@description 粉丝地域
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { browserHistory } from 'dva/router';
import styles from '../../routes/BusinessData.less';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';
import {Card, Icon, Tooltip, Row, Col} from 'antd';


const UserPurchase = ({data, dispatch ,loading}) => {
  if(!data.dayIdList){
    return false
  }
  let state={
        // sourceName : ['天猫&POS购买数量','微信粉丝数量','只在POS购买数量','用户总数','未产生购买','微信粉丝未注册手机号人数','只在天猫购买数量','手机号数量','微信粉丝注册手机号人数'],
        // seriesName : ['PTValueList','WOpendIdValueList','PValueList','UCValueList','ReNoPurValueList','WNoReValueList','TValueList','telValueList','WRValueList'],
        sourceName : ['用户总数','手机号数量','微信粉丝数量','只在天猫购买数量','天猫&POS购买数量','只在POS购买数量','未产生购买','微信粉丝未注册手机号人数','微信粉丝注册手机号人数'],
        seriesName : ['UCValueList','telValueList','WOpendIdValueList','TValueList','PTValueList','PValueList','ReNoPurValueList','WNoReValueList','WRValueList'],
        dayIdList:data.dayIdList,
        // seriesData:[],
        reData:'',
        cname:'近30天各渠道用户资产增长趋势'
      }

  let seriesData = [];

  for(var i=0;i<state.seriesName.length;i++){
      seriesData.push({
        name:state.sourceName[i],
        type:'line',
        stack:'',
        data:data[state.seriesName[i]]
      })
    }

  
  let option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
          data:state.sourceName,
          textStyle:{
              color:"#fff"
          },
          selected: {
                '用户总数':true,
                '手机号数量':true,
                '微信粉丝数量':true,
                '只在天猫购买数量':false,
                '天猫&POS购买数量':false,
                '只在POS购买数量':false,
                '未产生购买':false,
                '微信粉丝未注册手机号人数':false,
                '微信粉丝注册手机号人数':false
            },
          icon:'stack',
          y:10,
          x:'left',
      },
      grid: {
        show:false,
        borderWidth: 0,
        top:'30%',
        bottom:'8%'
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: state.dayIdList,
        splitLine:{
      　　　　show:false
      　　},
        axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisLine:{
                  lineStyle:{
                    color:"#1790cf",
                    width:1
                  }
                }
      }],
      yAxis: [{
        type: 'value',
        splitLine:{
      　　　　show:false
      　　},
        axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                scale:true,
                axisLine:{
                  lineStyle:{
                    color:"#1790cf"
                  }
                }
      }],
      series:seriesData
    };
  function exExcel(){
    var title = ['日期','用户总数','手机号数量','微信粉丝数量','只在天猫购买数量','天猫&POS购买数量','只在POS购买数量','未产生购买','微信粉丝未注册手机号人数','微信粉丝注册手机号人数'];
        var datas = [],name;
        for(var i=0;i<state.dayIdList.length;i++){
          var arr = [];
          arr.push(state.dayIdList[i]);
          for(var j=0;j<state.seriesName.length;j++){
            name = state.seriesName[j];
            arr.push(data[name][i]);
          }
          datas.push(arr)
        }

        if(datas == '')  
            return;  
        toExcel(title, "近30天各渠道用户资产增长趋势", datas);
  }

  return (
    < div className = {styles.box}>
      < h3 >近30天各渠道用户资产增长趋势&nbsp;
        <Tooltip placement="right" title="截止至昨日，最近30天各个渠道用户资产的累计人数趋势。">
          <Icon type="question-circle-o" className={styles.anticon}/>
        </Tooltip>
      < /h3> 
      < div className = {styles.box_wrap} id="zz_box">
      <div className={styles.downloads}>
        <span className={styles.dimg} onClick={downImg.bind(this,'zz_box','近30天各渠道用户资产增长趋势')}></span>
                <span className={styles.desl} onClick={exExcel.bind(this)}></span>
      </div>
      < ReactEcharts option = {option} showLoading={loading}/></div> < /div>
  );
};

UserPurchase.propTypes = {
    // data: PropTypes.object
};

export default connect()(UserPurchase);